<template>
	<view>
		<van-nav-bar title="登录" :border="false" z-index='11' />
		<!-- <view :style="{height: height, backgroundColor: 'red'}"></view> -->
		<view class="login-box">
			<view class="login-title">樱花屋酒吧欢迎您</view>
			<view class="login-btn">
				<van-button open-type="getUserInfo" size="large" round block color="#db3231" @getuserinfo="getuserinfo">
					<text style="font-size: 36rpx;">登 录</text>
				</van-button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		setToken
	} from '../../utils/auth.js';
	import {
		mapActions
	} from 'vuex';
	import {
		login
	} from '../../api/home/index.js';
	export default {
		data() {
			return {

			}
		},
		methods: {
			...mapActions(['setUserInfo']),
			getuserinfo(event) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success(e) {
						let {
							code,
							errMsg
						} = e;
						if (errMsg = 'login:ok') {
							let {
								errMsg,
								userInfo,
								encryptedData,
								rawData,
								signature,
								iv
							} = event.detail;
							// 允许授权
							if (errMsg === 'getUserProfile:ok') {
								that.$slLoading('登录中...').then(() => {
									login({
										code,
										encryptedData,
										rawData,
										signature,
										iv
									}).then(res => {
										const {token, user: userInfo} = res;
										setToken(token);
										that.setUserInfo({userInfo});
										uni.navigateBack({delta: 1});
									}).finally(() => {
										uni.hideLoading();
									})
								})
							}
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.login-box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 10;
		background-image: url("");
		background-position: center center;

		.login-btn {
			width: calc(100% - 46rpx);
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.login-title {
			font-size: 44rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-align: center;
			padding-bottom: 64rpx;
			padding-top: 100rpx;
		}
	}
</style>
